<template>
  <div>
    <div ref="echartsRef" style="height: 600px"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getSimpleData } from '@/api/echarts'
// echarts5.0之后，导入的方式跟之前不一样（全量引入）
// import * as echarts from 'echarts'

// 以下是按需引入（打包出来体积小）
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components'
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
])

const echartsRef = ref(null)

// 初始化echarts
const initEcharts = async () => {
  const res = await getSimpleData()

  // 初始化完毕
  const myCharts = echarts.init(echartsRef.value)

  // 准备option
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: 'XXX 公司销量图'
    },
    tooltip: {
      // 提示，手指移动上去之后的提示
      trigger: 'item'
    },
    xAxis: {
      type: 'category', // 类目轴
      data: res.data.data.map(item => item.name)
    },
    yAxis: {
      type: 'value' // 数值轴
    },
    series: [
      {
        name: '销量',
        type: 'bar', // 图表类型
        data: res.data.data.map(item => item.value)
      }
    ]
  }

  myCharts.setOption(option)
}

onMounted(() => {
  initEcharts()
})
</script>
